<template>
<div>
<ul class="list">
<li class="list-item"
v-for="key of aplha"
:key="key"
@click="$emit('getaplha',key)"
@touchmove="handmove"
:ref="key">
{{key}}
</li>
</ul>
</div>
</template>

<script>
export default {
  name: 'CityLetter',
  props: {
    lists: Object
  },
  computed: {
    aplha () {
      let arr = []
      for (let key in this.lists) {
        arr.push(key)
      }
      return arr
    }
  },
  methods: {
    handmove (e) {
      let mouseY = e.touches[0].pageY
      let ApTop = this.$refs['A'][0].offsetTop
      let aplhaHeader = (mouseY - 80) - ApTop
      let index = Math.floor(aplhaHeader / 20)
      let curaplha = this.aplha[index]
      if (curaplha) {
        this.$emit('getaplha', curaplha)
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .list
    display flex
    flex-direction column
    justify-content center
    position fixed
    top 1.58rem
    right 0rem
    bottom 0rem
    width 0.4rem
    .list-item
      line-height 0.4rem
      text-align center
      color #00BCD4
</style>
